<template>
  <div>
    <!--配套厂结算 -->
    <TopFilter ref="TopFilterss" :list="topFilterList" :cols="3" :collapse="collapse" labelWidth="120" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchapi"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      :is-select-column="false"
      columnsRef="ClaimAccessoryAccountSummary"
    >
        <template slot="controls" slot-scope="props">
            <multiuse-button size="small" type="primary"  :click="exportFileBtn.bind()">下载</multiuse-button>
        </template>
    </FilterTable>
    </div>
</template>
<script>
import { getListByPage,getSupplierSettleExport } from '@/api/claim/factory/ClaimAccessoryAccountSummary';
import { exportExcelFile } from '@/utils/index';
export default {
    data() {
      return {
        dataList: [],
        rowData: {},
        visible: false,
        detailFlag: false,
        editFlag: false,
        collapse: false,
        infoId: null,
        fetchapi: getListByPage,
        topFilterList: this.topFilterListFun(),
        flterValue: {}, //参数
        columns: this.creatHeader(),
        fetchParams: {}, //ipa 接口
      }
    },
    methods: {
        //搜索数据
        topFilterListFun() {
        return [
          { type: 'INPUT', label: '索赔单号', fieldName: 'claimNo', placeholder: '请输入索赔单号...', initialValue: '' },
          { type: 'INPUT', label: '配套厂编码', fieldName: 'responsibleCode', placeholder: '请输入配套厂编码...', initialValue: '' },
          { type: 'DATE', label: '结算月份', fieldName: 'checkAt', placeholder: '...', initialValue: '',dateFormat: 'yyyy-MM' }
        ];
      },
      //table表头和数据源
        creatHeader() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            fixed: 'left',
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          { title: '结算月份', dataIndex: 'checkAt', sorter: true,dateFormat: 'yyyy-MM' },
          { title: '配套厂编码', dataIndex: 'responsibleCode', sorter: true },
          { title: '配套厂名称', dataIndex: 'responsiblePerson', sorter: true },
          { title: '结算金额    ', dataIndex: 'settlementAmount', sorter: true },
          { title: '工时费', dataIndex: 'claimLabourAmount', sorter: true },
          { title: '材料费', dataIndex: 'claimPartAmount', sorter: true },
          { title: '其他费用', dataIndex: 'claimAddAmount', sorter: true },
          { title: 'K系数', dataIndex: 'manageRate', sorter: true },
          { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
          { title: 'VIN', dataIndex: 'vin', sorter: true },
          { title: '主损件代码', dataIndex: 'partCode', sorter: true },
          { title: '主损件名称', dataIndex: 'partName', sorter: true },
          { title: '服务站索赔金额', dataIndex: 'sumAmount', sorter: true },
          { title: '索赔结算时间', dataIndex: 'settleDate', sorter: true,dateFormat: 'yyyy-MM-dd HH:mm:ss' },
        ];
      },
      changeHandle(val) {
        this.fetchParams = Object.assign({}, val);
      },
      async exportFileBtn(){
        await getSupplierSettleExport(this.fetchParams).then(res => {
        console.log(res);
        if (res.status !== 'failure') {
          exportExcelFile(res.data, '配套厂结算信息');
        } else {
          notifyAction('导出失败', 'error');
        }
      });
      },
      selectChange(rows) {
      },
    }
}
</script>
<style lang="less" scoped></style>

            